.page-home {
  position: relative;
  .video {
    position: absolute;
    right: 0px;
    bottom: 0px;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;

    source {
      min-width: 100%;
      min-height: 100%;
    }
  }
  .banner {
    position: relative;
    // height: 680px;
    // background-image: url('../../images/home/bg_1.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    .header {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      background-color: transparent;
    }

    &>.inner {
      position: relative;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      height: 100%;
      z-index: 10;

      h2 {
        position: relative;
        font-size:46px;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:rgba(255,255,255,1);
        height: 65px;
        line-height:65px;
        text-shadow:0px 0px 2px rgba(0,0,0,0.5);
        margin-bottom: 58px;

        &>i {
          position: absolute;
          top: 0;
          right: -102px;
          content: '';
          width: 97px;
          height: 28px;
          background-image: url('../../images/home/banner_1.png');
        }
      }

      .nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 820px;
        margin-bottom: 25px;

        a {
          position: relative;
          padding: 7px 18px;
          text-align: center;
          background-color: transparent;
          font-size:17px;
          font-family:PingFangSC-Regular;
          font-weight:400;
          color:rgba(255,255,255,1);
          border-radius:4px;

          &:hover, &:hover:after {
            transition: 0.5s;
          }

          &.active, &:hover {
            background:rgba(255,255,255,0.3);
          }

          &.active:after, &:hover:after {
            position: absolute;
            bottom: -5px;
            right: 10px;
            content: '';
            width:0;
            height:0;
            border-width:5px 5px 0;
            border-style:solid;
            border-color:rgba(255,255,255,0.3) transparent transparent;
          }
        }
      }

      .search-input {
        width:820px;
        height:60px;
        margin-bottom: 60px;
        border: none;
      
        .anticon-search {
          font-size: 24px;
          color: #fff;
        }

        .ant-input {
          padding: 4px 26px;
        }

        .ant-input-suffix {
          right: 26px;
        }

        input {
          font-size:18px;
          font-family:PingFangSC-Light;
          color: rgba(255,255,255,1);
          background:rgba(255,255,255,0.26);
          border-radius:4px;
          border:1px solid rgba(255,255,255,0.71);

          &::-webkit-input-placeholder {
            color:rgba(255,255,255,0.71);
          }
        }
      }

      .company-all {
        font-size:20px;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:rgba(255,255,255,1);
        margin-bottom: 17px;

        span {
          margin: 0 11px;
          font-size:36px;
          font-family:DINAlternate-Bold;
          font-weight:bold;
          color:rgba(255,255,255,1);
        }
      }

      .company-detail {
        font-size:18px;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:rgba(255,255,255,1);
        line-height:25px;
        text-shadow:0px 0px 2px rgba(0,18,35,0.23);
      }
    }
  }

  .section {
    padding-top: 74px;
    .inner {
      width: 1200px;
      margin: 0 auto;
    }

    h2 {
      text-align: center;
      font-size:34px;
      font-family:PingFangSC-Regular;
      font-weight:400;
      color:rgba(51,51,51,1);
    }

    .info-wrap {
      margin-top: 30px;
      margin-bottom: 86px;
    }

    .info {
      text-align: center;
      font-size:16px;
      font-family:PingFangSC-Light;
      font-weight:300;
      color:rgba(153,153,153,1);
      line-height:32px;
    }
  }

  .section1, .section3 {
    background-color: #fff;
  }

  .section2, .section4 {
    background-color: rgba(246,248,255,1);
  }

  .section1 {
    .list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;

      li {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 25%;
        margin-bottom: 48px;
      }

      .img {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 60px;
        margin-bottom: 30px;
      }

      h3 {
        margin-bottom: 14px;
        text-align: center;
        font-size:18px;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:rgba(51,51,51,1);
      }

      p {
        width: 250px;
        min-height: 72px;
        text-align: center;
        font-size:14px;
        font-family:PingFangSC-Light;
        font-weight:300;
        color:rgba(153,153,153,1);
        line-height:24px;
      }
    }
  }

  .section2 {
    padding-bottom: 79px;
    .content {
      height: 410px;

      .swiper-container {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        position: relative;

        &>img {
          width: 300px;
          height: 410px;
        }

        &:hover {
          .mask {
            visibility: visible;
          }
        }
      }

      .mask {
        visibility: hidden;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background:linear-gradient(60deg,rgba(27,90,207,1) 0%,rgba(25,197,255,1) 100%);
        opacity:0.8;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #fff;

        img {
          max-width: 100%;
          margin-bottom: 30px;
        }

        h2 {
          font-size:20px;
          font-family:PingFangSC-Medium;
          font-weight:500;
          color:rgba(255,255,255,1);
          margin-bottom: 8px;
        }

        p {
          text-align: center;
          width: 60%;
          font-size:14px;
          font-family:PingFangSC-Light;
          font-weight:300;
          color:rgba(255,255,255,1);
          line-height:26px;
        }
      }
    }
  }

  .section3 {
    padding-bottom: 79px;

    h2 {
      position: relative;
    }

    .bg {
      position: absolute;
      left: 50%;
      top: -10px;
      width: 302px;
      height: 65px;
      margin-left: -151px;
      background-image: url('../../images/home/bg_2.png');
      background-position: center;
      background-size: cover;
    }
    .content{
      position: relative;
      .jiantou1{
        position: absolute;
        top:615px;
        left: 345px;
        width: 40px;
        animation: jiantou1 2s infinite;
      }
      @keyframes jiantou1 {
        from {left:345px;}
        to {left:485px;}
      }

      .jiantou2{
        position: absolute;
        top:615px;
        left: 670px;
        width: 40px;
        animation: jiantou2 2s infinite;
      }
      @keyframes jiantou2 {
        from {left:675px;}
        to {left:815px;}
      }
    }
  }

  .section4 {
    padding-bottom: 79px;
    h2 {
      margin-bottom: 51px;
    }
    .content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width:1200px;
      height:360px;
      padding: 61px 76px 57px 49px;
      background:rgba(255,255,255,1);

    }

    .left {
      margin-right: 57px;
      p {
        width: 632px;
        font-size:16px;
        font-family:PingFangSC-Light;
        font-weight:300;
        color:rgba(153,153,153,1);
        line-height:32px;
        margin-bottom: 25px;
      }
      a {
        font-size:14px;
        font-family:PingFangSC-Light;
        font-weight:300;
        color:rgba(27,90,207,1);
        line-height:20px;
      }
    }

    .right {
      width:386px;
      height:242px;
      overflow: hidden;
      cursor: pointer;

      img:hover {
        transition: 1s;
        transform: scale(1.2);
      }
    }
  }
}


